<template>
  <div class="home">
  <div class="home-header">
    <div class="col-md" style="background:pink">
     <div  >
      <button class="jichu sign" @click="showAddAttendanceModal = true">签到</button>
     </div>
     <div>
    <el-dialog title="签到" :visible.sync="showAddAttendanceModal" width="30%">
    <el-form :model="newAttendance" label-width="80px" ref="newAttendanceForm">
      <el-form-item label="类型" prop="type" :rules="[{ required: true, message: '类型不能为空' }]">
        <el-radio-group v-model="newAttendance.type">
          <el-radio label="上班"></el-radio>
          <el-radio label="下班"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="备注" prop="notes">
        <el-input v-model="newAttendance.notes" type="textarea"></el-input>
      </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleCancelAddAttendance">取 消</el-button>
        <el-button type="primary" @click="saveNewAttendance">确 定</el-button>
      </span>
    </el-dialog>
  </div>
  <div style="padding-top:30px;margin:0 auto;width:fit-content">
    <table style="font-size:18px;">  
        <thead>  
            <tr>  
                <th>类型</th>  
                <th style="width:200px;text-align:center">签到时间</th>  
                <th>签到状态</th>  
            </tr>  
        </thead>  
        <tbody>  
            <tr v-for="item in todayAttendace" :key="item.id"> <!-- 假设每个 item 有唯一的 id -->  
                <td style="text-align:center">{{ item.type }}</td>  
                <td style="width:200px;text-align:center">{{ item.time }}</td>  
                <td style="text-align:center">{{ item.state }}</td>  
            </tr>  
        </tbody>  
    </table> 
  </div>
     <div class="bottom">
      <a href="#" @click.prevent="findMoreAttendance" style="color: black; font-weight: bold;">更多</a> 
      </div>
    </div>
    <div class="col-md">
     <div >
      <button class="jichu file-manage">文件管理</button>
     </div>
       <div style="padding-top:20px;margin:0 auto;width:fit-content">
        <table style="font-size:12px;">  
            <thead>  
                <tr>  
                    <th style="text-align:center">文件名称</th>  
                    <th style="text-align:center">文件大小</th>  
                </tr>  
            </thead>  
            <tbody>  
                <tr v-for="item in threeFiles" :key="item.id"> <!-- 假设每个 item 有唯一的 id -->  
                    <td style="text-align:center">{{ formatFileName(item.cFileName) }}</td>
                    <td>{{ item.nSize }}</td>  
                </tr>  
            </tbody>  
        </table> 
      </div>
     <div class="bottom">
      <a href="#" @click.prevent="findMoreFile" style="color: black; font-weight: bold;">更多</a> 
     </div>
    </div>

    <div class="col-md" style="background:pink">
      <div class="jichu friend">疑问解答
      </div>
      <div style="padding:50px;font-size:15px">请点击“更多”按钮跳转到“自动回复机器人”</div>
      <div class="bottom">
        <a href="#" @click.prevent="findMoreRobot" style="color: black; font-weight: bold;">更多</a> 
     </div>
    </div>


  </div>
  <div class="middle">
    <div class="notice">
      <div style="padding:10px">
        <button class="jichu">公告与通知</button>
      </div>
      <div class="middle-col-md">
        <div style="padding-top:15px;margin:0 auto;width:fit-content">
        <table style="font-size:13px;">  
            <thead>  
                <tr>  
                    <th style="width:40px;">类型</th>  
                    <th style="width:40px">状态</th>  
                    <th style="width:200px;text-align:center">标题</th>
                    <th style="width:200px;text-align:center">发布时间</th>
                    <th>操作</th>
                </tr>  
            </thead>  
            <tbody>  
                <tr v-for="item in somNotices" :key="item.id"> <!-- 假设每个 item 有唯一的 id -->  
                    <td>{{item.type}}</td>
                    <td>{{item.state}}</td>
                    <td style="text-align:center">{{ formatFileName(item.title) }}</td>
                    <td style="text-align:center">{{item.releasetime}}</td>
                    <td>          
                      <button class="cz-jichu" @click="viewNoticeItem(item.id)">详情</button>  
                    </td>
                </tr>  
            </tbody>  
        </table> 
      </div>
      <el-dialog title="通知公告详情"  :visible.sync="showDetailModal" width="50%">  
      <el-form :model="detailItem" label-width="80px">  
        <el-form-item label="类型">  
          <el-input v-model="detailItem.type" disabled></el-input>  
        </el-form-item>  
        <el-form-item label="状态">  
          <el-input v-model="detailItem.state" disabled></el-input>  
        </el-form-item>  
        <el-form-item label="标题">  
          <el-input v-model="detailItem.title" disabled></el-input>  
        </el-form-item>  
        <el-form-item label="描述">  
          <el-input type="textarea" v-model="detailItem.desc" disabled></el-input>  
        </el-form-item>  
        <el-form-item label="发布时间">  
          <el-input v-model="detailItem.releasetime" disabled></el-input>  
        </el-form-item>  
        <el-form-item label="发起人">  
          <el-input v-model="detailItem.releaseperson" disabled></el-input>  
        </el-form-item>  
        <el-form-item label="部门">  
          <el-input v-model="detailItem.dept" disabled></el-input>  
        </el-form-item>   
      </el-form>  
      <span slot="footer" class="dialog-footer">  
        <el-button @click="showDetailModal = false">取 消</el-button>  
      </span>  
    </el-dialog>
        </div>
      <div class="middle-bottom">
      <a href="#" @click.prevent="findMoreNotice" style="color: black; font-weight: bold;">更多</a> 
     </div>
    </div>
    <div class="schedule">
      <div style="padding:10px">
        <button class="jichu">
          <a href="#" @click.prevent="findMySchedule" style="color: black;">我的日程</a> 
          </button>
        
<div style="margin:0 auto;width:fit-content">  
  <el-calendar v-model="currentDate" style="height: 330px;">  
    <template slot="dateCell" slot-scope="{ data }">  
      <div class="date-cell" style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; width: 100%;">  
        <span style="font-size: 10px; margin-bottom: 5px;">{{ data.day.split('-').pop() }}</span>  
        <ul v-if="events[data.day]" style="list-style: none; padding: 0; margin: 0; width: 100%; height: 100%; display: flex; flex-direction: column; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none;">  
          <li v-for="event in events[data.day]" :key="event.id" class="event-item" :title="event.title" @click="viewItem(event)" style="flex: 0 0 auto;font-size:8px;height:6px;">  
            {{ event.title }}  
          </li>  
        </ul>  
      </div>  
    </template>  
  </el-calendar> 
      <!-- 查看详情弹窗 -->  
    <el-dialog title="日程详情" :visible.sync="showScheduleDetailModal" width="60%">  
      <el-form :model="detailScheItem" label-width="80px">  
        <el-row>  
          <el-col :span="12">  
            <el-form-item label="类型">  
              <el-input v-model="detailScheItem.type" disabled></el-input>  
            </el-form-item>  
          </el-col>  
          <el-col :span="12">  
            <el-form-item label="状态">  
              <el-input v-model="detailScheItem.state" disabled></el-input>  
            </el-form-item>  
          </el-col>  
        </el-row>  
        <el-row>  
          <el-col :span="12">  
            <el-form-item label="标题">  
              <el-input v-model="detailScheItem.title" disabled></el-input>  
            </el-form-item>  
          </el-col>  
          <el-col :span="12">  
            <el-form-item label="描述">  
              <el-input v-model="detailScheItem.desc" disabled></el-input>  
            </el-form-item>  
          </el-col>  
        </el-row>  
        <el-row>  
          <el-col :span="12">  
            <el-form-item label="开始时间">  
              <el-input v-model="detailScheItem.starttime" disabled></el-input>  
            </el-form-item>  
          </el-col>  
          <el-col :span="12">  
            <el-form-item label="结束时间">  
              <el-input v-model="detailScheItem.deadline" disabled></el-input>  
            </el-form-item>  
          </el-col>  
        </el-row>  
        <el-row>  
          <el-col :span="12">  
            <el-form-item label="发起人">  
              <el-input v-model="detailScheItem.promoter" disabled></el-input>  
            </el-form-item>  
          </el-col>  
          <el-col :span="12">  
            <el-form-item label="部门">  
              <el-input v-model="detailScheItem.deptname" disabled></el-input>  
            </el-form-item>  
          </el-col>  
        </el-row>  
        <el-row>  
            <el-col :span="12">  
            <el-form-item label="会议室">  
              <el-input v-model="detailScheItem.boardroom" disabled></el-input>  
            </el-form-item>  
          </el-col> 
          <el-col :span="12">  
            <el-form-item label="接收人">  
              <el-input type="textarea" v-model="detailScheItem.recipient" disabled></el-input>  
            </el-form-item>  
          </el-col>  
        </el-row>  
      </el-form>  
      <span slot="footer" class="dialog-footer">  
        <el-button @click="showScheduleDetailModal = false">取 消</el-button>  
      </span>  
    </el-dialog>   
</div>  
        
      </div>
    </div>
  </div>
  <div class="last">
    <div style="padding:10px">
    <button class="jichu">
      <a href="#" @click.prevent="findMyTask" style="color: black;">工作任务</a> 
      </button>
        <div class="task-col-md">
          <div style="padding-top:5px;margin:0 auto;width:fit-content">
            <table style="font-size:17.7px;">  
            <thead>  
                <tr>  
                    <th style="width:100px;text-align:center">任务类型</th>  
                    <th style="width:160px;text-align:center">标题</th>
                    <th style="width:200px;text-align:center">描述</th>
                    <th style="width:190px;text-align:center">开始时间</th>
                    <th style="width:190px;text-align:center">结束时间</th>
                    <th style="width:100px;text-align:center">发起人</th>  
                    <th style="width:70px;text-align:center">部门</th>
                    <th style="width:100px;text-align:center">状态</th>    
                    <th style="text-align:center">操作</th>
                </tr>  
            </thead>  
            <tbody>  
                <tr v-for="item in someTasks" :key="item.id"> <!-- 假设每个 item 有唯一的 id -->  
                    <td style="text-align:center">{{item.type}}</td>
                    <td style="text-align:center">{{ formatFileName(item.title) }}</td>
                    <td style="text-align:center">{{ formatFileName(item.desc) }}</td>
                    <td style="text-align:center">{{item.starttime}}</td>
                    <td style="text-align:center">{{item.deadline}}</td>
                    <td style="text-align:center">{{formateRealName(item.promoter)}}</td>
                    <td style="text-align:center">{{item.deptname}}</td>
                    <td style="text-align:center">{{item.state}}</td>
                    <td>          
                      <button class="cz-jichu" @click="viewTaskItem(item.id)">详情</button>  
                    </td>
                </tr>  
            </tbody>  
        </table> 
          </div>
          <el-dialog title="任务详情" :visible.sync="showTaskDetailDialog" width="50%">  
            <el-form :model="selectedTask" label-width="80px">  
              <el-row>  
                <el-col :span="12">  
                  <el-form-item label="任务类型">  
                    <el-input v-model="selectedTask.type" disabled></el-input>  
                  </el-form-item>  
                </el-col>  
                <el-col :span="12">  
                  <el-form-item label="任务标题">  
                    <el-input v-model="selectedTask.title" disabled></el-input>  
                  </el-form-item>  
                </el-col>  
              </el-row>  
              <el-row>  
                <el-col :span="12">  
                  <el-form-item label="优先级">  
                    <el-input v-model="selectedTask.priority" disabled></el-input>  
                  </el-form-item>  
                </el-col>   
                <el-col :span="12">  
                  <el-form-item label="开始时间">  
                    <el-input v-model="selectedTask.starttime" disabled></el-input>  
                  </el-form-item>  
                </el-col>  
              </el-row>  
              <el-row>  
                <el-col :span="12">  
                  <el-form-item label="结束时间">  
                    <el-input v-model="selectedTask.deadline" disabled></el-input>  
                  </el-form-item>  
                </el-col>  
                <el-col :span="12">  
                  <el-form-item label="发起人">  
                    <el-input v-model="selectedTask.promoter" disabled></el-input>  
                  </el-form-item>  
                </el-col>  
              </el-row>  
              <el-row>  
                <el-col :span="12">  
                  <el-form-item label="部门">  
                    <el-input v-model="selectedTask.deptname" disabled></el-input>  
                  </el-form-item>  
                </el-col>  
                <el-col :span="12">  
                  <el-form-item label="负责人">  
                    <el-input v-model="selectedTask.charge" disabled></el-input>  
                  </el-form-item>  
                </el-col>  
              </el-row>  
              <el-row>  
                <el-col :span="12">  
                  <el-form-item label="任务描述">  
                    <el-input type="textarea" v-model="selectedTask.desc" disabled></el-input>  
                  </el-form-item>  
                </el-col>  
                <el-col :span="12">  
                  <el-form-item label="接收人">  
                    <el-input type="textarea" v-model="selectedTask.recipient" disabled></el-input>  
                  </el-form-item>  
                </el-col>  
              </el-row>  
              <el-row>  
                <el-col :span="12">  
                  <el-form-item label="状态">  
                    <el-input v-model="selectedTask.state" disabled></el-input>  
                  </el-form-item>  
                </el-col>  
                <el-col :span="12">  
                  <el-form-item label="评价">  
                    <el-input type="textarea" v-model="selectedTask.evaluate" disabled></el-input>  
                  </el-form-item>  
                </el-col>  
              </el-row>   
            </el-form>  
            <div slot="footer" class="dialog-footer">  
              <el-button @click="showTaskDetailDialog = false">取 消</el-button>  
            </div>  
          </el-dialog> 
        </div>
    </div> 
  </div>
  </div>



</template>

<script>
import {getAttendanceList,addAttendance,addAttendanceStandard,getTodayVacationList} from '@/api/attendance';
import {getUserList} from '@/api/user';
import {getThreeFiles} from '@/api/file';
import {getSomeNotices,getNoticeDetailById} from '@/api/notice';
import {getSomeTasks,getTaskDetailById} from '@/api/task';
import {getScheduleDetailById,getMyScheduleList} from '@/api/schedule';
import {addLog} from '@/api/log';
export default {
  data() {
    return {
      showAddAttendanceModal: false,
      newAttendance: {
        type: '',
        name: '',
        notes: ''
      },
      logItem:{
        mn:'',
        opn:'',
        res:''
      },
      userList: [],
      todayAttendace:[],
      threeFiles:[],
      somNotices:[],
      someTasks:[],
      showDetailModal: false,  
      showTaskDetailDialog:false,
      showScheduleDetailModal:false,
      detailItem:{},
      detailScheItem:{},
      selectedTask:{},
      currentDate: new Date(),
      events: {},
      scheduleData: [], // 存储从 API 获取的完整日程数据  
    };
  },
  methods: {
    findMyTask(){
        this.logItem.mn = "findMyTask";
        this.logItem.opn = "查看我的任务";
        this.logItem.res = "true";
        addLog(this.logItem);
        this.$router.push('/task/mine');
    },
    findMySchedule(){
        this.logItem.mn = "findMySchedule";
        this.logItem.opn = "查看我的日程";
        this.logItem.res = "true";
        addLog(this.logItem);
        this.$router.push('/schedule/mineSchedule');
    },
    findMoreNotice(){
        this.logItem.mn = "findMoreNotice";
        this.logItem.opn = "查看更多通知";
        this.logItem.res = "true";
        addLog(this.logItem);
        this.$router.push('/notice/list');
    },
    findMoreRobot(){
        this.logItem.mn = "findMoreRobot";
        this.logItem.opn = "查看自动回复机器人";
        this.logItem.res = "true";
        addLog(this.logItem);
        this.$router.push('/robot/autoanswer');
    },
    findMoreFile(){
        this.logItem.mn = "findMoreFile";
        this.logItem.opn = "查看更多文件信息";
        this.logItem.res = "true";
        addLog(this.logItem);
        this.$router.push('/file/fileManage');
    },
    findMoreAttendance(){
        this.logItem.mn = "findMoreAttendance";
        this.logItem.opn = "查看更多考勤信息";
        this.logItem.res = "true";
        addLog(this.logItem);
        this.$router.push('/attendance/attendanceManage');
    },
    fetchScheduleData() {  
      getMyScheduleList()  
        .then(response => {  
          this.scheduleData = response.data;  
          this.groupEventsByDate(this.scheduleData);  
        })  
        .catch(error => {  
          console.error('获取日程数据失败', error);  
          this.$message.error('获取日程数据失败');  
        });  
    },  
groupEventsByDate(data) {  
  this.events = {};  
  data.forEach(item => {  
    if (item.starttime && item.deadline) {  
      let startDate = new Date(this.formatDate(item.starttime));  
      let endDate = new Date(this.formatDate(item.deadline));  

      while (startDate <= endDate) {  
        const eventDate = this.formatDate(startDate.toISOString());  

        if (!this.events[eventDate]) {  
          this.events[eventDate] = [];  
        }  
        this.events[eventDate].push(item);  

        startDate.setDate(startDate.getDate() + 1);  
      }  
    }  
  });  

  // 对每天的日程事件进行排序  
  for (const date in this.events) {  
    if (this.events.hasOwnProperty(date)) {  
      this.events[date].sort((a, b) => {  
        const timeA = new Date(a.starttime).getTime();  
        const timeB = new Date(b.starttime).getTime();  
        return timeA - timeB; // 从早到晚排序  
      });  
    }  
  }  
},  
    formatDate(dateString) {  
      // 将 "2025-03-04T16:00:00" 格式化为 "2025-03-04"  
      const date = new Date(dateString);  
      const year = date.getFullYear();  
      const month = String(date.getMonth() + 1).padStart(2, '0');  
      const day = String(date.getDate()).padStart(2, '0');  
      return `${year}-${month}-${day}`;  
    },  
    saveNewAttendance() {
      this.$refs.newAttendanceForm.validate((valid) => {
        if (valid) {
          addAttendance(this.newAttendance)
            .then(response => {
              this.$message.success('签到成功');
              this.showAddAttendanceModal = false;
              this.logItem.mn = "saveNewAttendance";
              console.log(this.newAttendance)
              if(this.newAttendance.type==="上班"){
                  this.logItem.opn = "上班打卡";
              }else if(this.newAttendance.type==="下班"){
                this.logItem.opn = "下班打卡";
              }
              this.logItem.res = "true";
              addLog(this.logItem);
              this.resetNewAttendance();
              window.location.reload();
            })
            .catch(error => {
              this.logItem.mn = "saveNewAttendance";
              if(this.newAttendance.type=="上班"){
                  this.logItem.opn = "上班打卡";
              }else if(this.newAttendance.type=="下班"){
                this.logItem.opn = "下班打卡";
              }
              this.logItem.res = "false";
              addLog(this.logItem);
              this.$message.error(this.newAttendance.type+'打卡已签到过');
              console.error(error);
            });
        } else {
          return false;
        }
      });
    },
    resetNewAttendance() {
      this.newAttendance = {
        type: '',
        name: '',
        notes: ''
      };
    },
    handleCancelAddAttendance() {
      this.showAddAttendanceModal = false;
      this.resetNewAttendance();
    },
    getUsers() {
      getUserList().then((response) => {
        this.userList = response.data;
      });
    },
    getTodayVacations(){
      getTodayVacationList().then((response)=>{
        this.todayAttendace = response.data;
      })
    },
    getFiles(){
      getThreeFiles().then((response)=>{
        this.threeFiles = response.data
      })
    },
    formatFileName(fileName) {  
        return fileName.length > 20 ? fileName.substring(0, 20) + '...' : fileName;  
    },
    formateRealName(name){
      return name.length > 6 ? name.substring(0, 6) + '...' : name;  
    },
    getNoticeList(){
      getSomeNotices().then((response)=>{
        this.somNotices = response.data;
      })
    },
    getTaskList(){
      getSomeTasks().then((response)=>{
        this.someTasks = response.data;
      })
    },
    viewNoticeItem(id) {  
      // 这里假设 row 已经包含了完整的通知公告信息  
      getNoticeDetailById(id).then((response)=>{
        this.detailItem = response.data
        this.logItem.mn = "viewNoticeItem";
        this.logItem.opn = "查看通知详情";
        this.logItem.res = "true";
        addLog(this.logItem);
        console.log(response.data)
      this.showDetailModal = true; // 显示详情弹窗  
      }).catch(()=>{
        this.logItem.mn = "viewNoticeItem";
        this.logItem.opn = "查看通知详情";
        this.logItem.res = "false";
        addLog(this.logItem);
        this.$message.info('查看公告消息失败');  
      })
    }, 
    async viewTaskItem(id) {  
      console.log("查看的任务id",id)
        try {  
          const response = await getTaskDetailById(id); // 假设任务对象有一个 id 属性  
          this.selectedTask = response.data; // 假设返回的数据在 response.data 中  
        this.logItem.mn = "viewTaskItem";
        this.logItem.opn = "查看任务详情";
        this.logItem.res = "true";
        addLog(this.logItem);
          this.showTaskDetailDialog = true; // 打开对话框  
        } catch (error) {  
          console.error('获取任务详情失败:', error); 
        this.logItem.mn = "viewTaskItem";
        this.logItem.opn = "查看任务详情";
        this.logItem.res = "false";
        addLog(this.logItem); 
          this.$message.error('获取任务详情失败，请重试。');  
        }  
      },      
    viewItem(row) {  
      getScheduleDetailById(row.id)  
        .then(response => {  
          this.showScheduleDetailModal = true; // 显示详情弹窗  
          console.log(response.data);  
        this.logItem.mn = "viewItem";
        this.logItem.opn = "查看日程详情";
        this.logItem.res = "true";
        addLog(this.logItem);
          this.detailScheItem = response.data;  
          if (this.detailScheItem.starttime) {  
            this.detailScheItem.starttime = this.detailScheItem.starttime.replace(/T/g, ' ');  
          }  
          if (this.detailScheItem.deadline) {  
            this.detailScheItem.deadline = this.detailScheItem.deadline.replace(/T/g, ' ');  
          }  
        })  
        .catch(error => {  
          console.log(error);  
        this.logItem.mn = "viewItem";
        this.logItem.opn = "查看日程详情";
        this.logItem.res = "false";
        addLog(this.logItem);
          this.$message.error('查看日程失败');  
        });  
    },  
  },
  created() {
    this.getUsers();
    this.getTodayVacations();
    this.getFiles();
    this.getNoticeList();
    this.getTaskList();
  },
    mounted() {  
    this.fetchScheduleData();  
  },  
}
</script>

<style lang="less" scoped>
.home{
  margin: 10px;
  /* position: fixed ; */
  /* flex: 1; */
}
.home-header{
  display: flex;
  padding-right: 30px;
  padding-top: 10px;
}
.jichu{
    position: absolute;
    border-radius: 3px;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
}
.cz-jichu{
      // position: absolute;
    border-radius: 3px;
    box-shadow: 2px 2px 2px rgba(255, 255, 255, 0.3);
}
.col-md{
    position: relative;
    flex: 1;
    height: 160px;
    padding: 10px;
    background: #fff;
    border-radius: 10px;
    margin-left: 20px;
    margin-right: 20px;
    font-weight: bold;
    color: black;
}
.bottom{
  position: absolute;
  border-top: 1px solid rgb(246,245,245);
  padding: 10px 20px;
  bottom: 0;
  right: 0;
  left: 0;
  color: black;
  font-weight: normal;
  text-align: center;
}
.middle-bottom{
    /* position: absolute; */
  border-top: 1px solid rgb(246,245,245);
  padding: 10px 20px;
  bottom: 0;
  right: 20px;
  left: 0;
  width: 96%;
  color: black;
  font-weight: normal;
  text-align: center;
}
.middle-col-md{
    /* position: relative; */
    flex: 1;
    height: 280px;
    padding: 10px;
    background: #49ca92;
    border-radius: 10px;
    margin-left: 20px;
    margin-right: 20px;
    font-weight: bold;
    color: black;
}
.schedule-col-md{
    flex: 1;
    height: 300px;
    padding: 10px;
    background: #49ca92;
    border-radius: 10px;
    margin-left: 20px;
    margin-right: 20px;
    font-weight: bold;
    color: black;
    margin-top:20px;
}
.task-col-md{
    flex: 1;
    height: 300px;
    padding: 10px;
    // background: #49ca92;
    border-radius: 10px;
    margin-left: 20px;
    margin-right: 20px;
    font-weight: bold;
    color: black;
    margin-top:20px;
}
.middle{
  height: 380px;
  margin-top:20px;
  margin-left: 20px;
  margin-right: 50px;
  border-radius: 10px;
  flex: 1;
  display: flex;  
  justify-content: space-between;  
  margin: 0 15px; 
}
.notice{
  margin-top:20px;
  margin-left: 0;
  margin-right:10px;
  height: 350px;
  background: #49ca92;
  width: calc(50% - 30px); 
  border-radius: 10px;
}
.schedule{

    flex: 1;
    height: 350px;
    width: calc(50% - 15px); 
    background: #788fd3;
    border-radius: 10px;
    margin-top:20px;
    margin-right:35px;
    margin-left: 20px;
    font-weight: bold;
    color: black;
    float: right;
}
.last{
  background: #a5a2f5;
  height: 350px;
  margin-top:20px;
  margin-left: 20px;
  margin-right: 50px;
  border-radius: 10px;
  flex: 1;
}
th, td {  
    border: 1px solid #ddd; /* 单元格边框 */  
    padding: 5px;
    text-align: left; /* 左对齐文本 */  
}  
.middle-col-md table {  
    color: black; /* 将表格中的文字颜色设置为白色 */  
} 
.date-cell ul::-webkit-scrollbar {  
  display: none; /* Safari 和 Chrome */  
}  
// .my-schedule-page {  
//   // padding: 20px;  
// }  
/* 日历内边框 */
.date-cell {  
  position: relative;  
  // height: 80px;  
  // border: 1px solid rgb(255, 255, 255); /* 修改这里 */  
  // padding: 5px;  
  overflow: auto;  
}  
/* 角标 */
.date-cell span {  
  position: absolute;  
  top: -2px;  
  right: 0px;  
  font-size: 10px;  
  color: black;  
}  
/* 单个日程直接展示样式 */
.event-item {  
  font-size: 10px;  
  line-height: 1;  
  margin-bottom: 2px;  
  padding: 2px 4px;  
  background-color: white;  
  border-radius: 4px;  
  cursor: pointer;  
  overflow: hidden;  
  text-overflow: ellipsis;  
  white-space: nowrap;  
  width: 87%;  
}  

/* 单个日程悬浮样式 */
.event-item:hover {  
  background-color: #dce35c;  
}  
/* 日历外边框 */
/deep/.el-calendar-day {  
  // height: 110px !important;  
  border: 1px solid white!important;; /* 这里也添加边框样式 */  
}  

/deep/.el-calendar-table .el-calendar-day {  
    border:none;  
    height: 45px;
}  
/deep/.el-calendar-box{  
    border: 1px solid white;  
}  

/deep/.el-calendar{
  background-color: #89cf88;
}
/deep/.el-calendar__header{
  padding: 5px;
}
/deep/.el-calendar__title{
  margin-left:40%;
}
/deep/.el-calendar-table thead th{
  padding:0px;
}
/deep/.el-calendar__body{
  padding:2px;
}
</style>